<template>
  <div class="root-box">
    <!--    可以被插槽中的元素指定css样式
        虽然也可以在 调用 <template v-slot:default> 中指定样式，也会沿用这里的样式
        但是位了不要让每一个子插槽都要指定样式，所以在这里统一处理了
    -->
    <slot class="start-event-component">

    </slot>
    <div class="vertical-line-box start-event-component">
      <div></div>
    </div>
    <i class="el-icon-circle-plus-outline start-event-component" @click="showNodeSelectDialog"></i>
    <div class="vertical-line-box start-event-component">
      <div></div>
    </div>

  </div>
</template>

<script>

export default {
  name: "formVerticalLineComponent",

  methods: {
    /**
     * 显示节点选择弹框
     * */
    showNodeSelectDialog(e) {
      this.$store.commit('showNodeSelectDialog', e.x, e.y)

    },

  }
}
</script>

<style scoped>
.root-box > .start-event-component {

  width: 100%;
}


/*竖线的盒子*/
.vertical-line-box {
  width: 200px;
  height: 50px;
}


.vertical-line-box > div {
  float: left;
  width: 50%;
  height: 100%;
  border-right: 1px solid black;
}


</style>
